<template>
  <div id="view">
    <div id="view-1">
      <div class="thy-34">
        <span class="jk_span"
          ><div></div>
          签约详情</span
        >
        <div class="view-2">
          <br />

          <div id="view-3">居民信息</div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item label="姓名：">
                    <div class="n3">{{ obj.record_name }}</div>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item label="身份证号：">
                    <div class="n3">{{ obj.record_card }}</div>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item label="性别：">
                    <div class="n3">{{ obj.sex }}</div>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item label="年龄：">
                    <div class="n3">{{ obj.age }}</div>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="7">
                <div class="grid-content bg-purple">
                  <el-form-item label="手机号码：">
                    <div class="n3">{{ obj.record_phone }}</div>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple">
                  <el-form-item label="现居地：">
                    <div class="n3">{{ obj.present_address }}</div>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-form-item label="居民标签：">
                    <div class="n3 span-33">{{ obj.residentsof_label }}</div>
                    <div class="n3 span-34">{{ obj.residentsof_label_two }}</div>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>

          <div class="thy-3">
            <span class="span-1">家庭成员</span>
            <div class="thy-4">
              <div class="thy-5">
                <img src="u1693 (1).jpg" alt="" class="img-1" />
              </div>
              <span class="span-12">李清</span>
              <span class="span-11">58岁</span>
              <span class="span-10">关系：父母</span>
            </div>
            <div class="thy-4">
              <div class="thy-5">
                <img src="u1699.png" alt="" class="img-1" />
              </div>
              <span class="span-12">王琳</span>
              <span class="span-11">28岁</span>
              <span class="span-10">关系：夫妻</span>
            </div>
          </div>
        </div>
      </div>

      <div class="thy-333">
        <br />

        <div>签约信息</div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="签约编号：">
                  <div class="n3">{{ obj.record_id }}</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="签约状态：">
                  <div class="n3">
                    {{ obj.conclude_state == 2 ? "生效中" : "已过期" }}
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="签约机构：">
                  <div class="n3">
                    {{
                      obj.conclude_organization == 2
                        ? "天明社区服务中心"
                        : "罗西社区服务中心"
                    }}
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="签约团队：">
                  <div class="n3">
                    {{
                      obj.conclude_doctor_team == 2 ? "胡曼团队" : "王浩团队"
                    }}
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="签约医生：">
                  <div class="n3">
                    {{ obj.conclude_doctor_team == 2 ? "王浩" : "李明" }}
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="服务包：">
                  <div class="n3">
                    {{
                      obj.conclude_server == 2 ? "儿童护理包" : "老年人护理包"
                    }}
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="签约周期：">
                  <div class="n3">{{ obj.contract_period }}</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="费用：">
                  <div class="n3">{{ obj.cost }}</div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="签约类型：">
                  <div class="n3">
                    {{ obj.contract_type == 2 ? "已签约" : "首次签约" }}
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="申请时间：">
                  <div class="n3">{{ obj.commencement_date }}</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="生效日期：">
                  <div class="n3">{{ obj.commencement_date }}</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="到期日期：">
                  <div class="n3">{{ obj.date_due }}</div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="审核人：">
                  <div class="n3">{{ obj.auditor }}</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="审核时间：">
                  <div class="n3">{{ obj.audit_time }}</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="支付时间：">
                  <div class="n3">{{ obj.timeof_payment }}</div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="支付方式：">
                  <div class="n3">{{ obj.modeof_payment }}</div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              <div class="grid-content bg-purple">
                <el-form-item label="签约备注：">
                  <div class="n3"> {{ obj.signeda_note }}</div>
                </el-form-item>
              </div>
            </el-col>
            
          </el-row>
        </el-form>
      </div>

      <div id="top_div">
        <el-row>
          <el-button type="primary" round class="elt" @click="t1">续约</el-button>
          <el-button round class="elt" @click="t2">返回</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {},
      ids: null,
    };
  },
  mounted() {
    this.ids = this.$route.query.idpp;
    this.$axios({
      url: "api/record/findRecordById",
      mounted: "GET",
      params: {
        record_id: this.ids,
      },
    }).then((res) => {
      console.log(res);
      this.obj = res.data;
    });
    this.name = this.msg;
    //  alert(this.ids)s
  },
  methods: {
    t1(){
      this.$router.push({path:'ViewDetail copy',query:{idpp:this.ids}}); 
      // this.$message('已续约');
    },
    t2(){
      this.$router.push({path:'servicelog'}); 
      // this.$message('审核已通过');
    },
  
  }
};
</script>

<style  scoped>
.span-33 {
  color: black;
  font-size: 120%;
  background-color: #f3eaec;
  border-radius: 7px;
  padding: 2px 4px;
  color: #fa746b;
  font-size: 14px;
  text-align: center;
}
.span-34 {
  color: black;
  font-size: 120%;
  background-color: #f3f4ee;
  border-radius: 7px;
  padding: 2px 4px;
  color: #fbdd78;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}
.grid-content{
  min-height: 10px; 
  margin-top: 20PX;
}
.elt{
  width: 150px;
  height: 50px;
}
#view-1 {
  width: 90%;
  float: left;
  margin-left: 5%;
  margin-top: 30px;
  background-color: #fff;
}
.img-1 {
  width: 100%;
  height: 100%;
}
.span-12 {
  float: left;
  font-size: 13;
  width: 60px;
  /* margin-left: 30px;
  margin-top: 30px; */
  margin-top: 20px;
}
.span-11 {
  float: left;
  /* margin-top: 38px; */
  color: rgb(125, 112, 112);
  font-size: 90%;
  margin-top: 20px;
}
.span-10 {
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  color: rgb(125, 112, 112);
  font-size: 90%;
}
.thy-5 {
  width: 30%;
  height: 40px;
  float: left;
  /* background-color: red; */
  margin: 25px 10px;
}
.thy-4 {
  border-radius: 6px;
  width: 200px;
  height: 100px;
  margin: 20px 40px;
  float: left;
  border: 1px solid rgb(141, 128, 128);
}
.thy-3 {
  width: 98%;
  /* height: 400px; */
  /* background-color: red; */
  float: left;
  margin-left: 1%;
  border-bottom: 1px solid #f2f7fb;
}
.thy-34 {
  width: 98%;
  /* height: 320px;  */
  /* background-color: red; */
  float: left;
  margin-left: 1%;
  border-bottom: 1px solid #daa618;
}
.thy-333 {
  width: 98%;
  height: 420px;
  /* background-color: yellow; */
  float: left;
  margin-left: 1%;
  /* border-bottom: 1px solid #f2f7fb; */
  border-bottom: 1px solid #daa618;
}
.span-1 {
  margin-top: 10px;
  float: left;
  font-size: 130%;
  width: 100%;
}
.jk_span {
  font-size: 18px;
  font-weight: 550;
  margin-top: 20px;
  float: left;
}
.jk_span div {
  width: 10px;
  height: 30px;
  background-color: #1877f2;
  -webkit-border-radius: 5px;
  /* margin-left: 40px; */
  /* margin-top: 27px; */
  margin-right: 10px;
  float: left;
}
#view-3 {
  float: left;
  width: 100%;
  margin-top: 20px;
}
#top_div {
  padding-top: 7px;
  width: 100%;
  height: 200px;
  /* background-color: #ffffff; */
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

















</style>